<template>
	<div>
		<qrcode-stream v-show="qrcode" :camera="camera" :torch="torchActive" @decode="onDecode" @init="onInit">
			<div class="qr-scanner">
				<div class="box">
					<div class="line"></div>
					<div class="angle"></div>
				</div>
				<div class="txt">
					将二维码放入框内
				</div>
			</div>
		</qrcode-stream>
		<br />
		<div>二维码内容是：{{ result }}</div>
	</div>
</template>

<script>
// 引入
import { QrcodeStream } from 'vue-qrcode-reader';

export default {
	// 注册
	components: {
		QrcodeStream
	},

	data() {
		return {
			result: '', // 扫码结果信息
			error: '', // 错误信息
			// show: false,
			// qrcode: false,
			qrcode: true,
			torchActive: false,
			camera: 'auto'
		};
	},

	methods: {
		onDecode(result) {			
			this.result = result;
			this.$router.push(this.result)
			
		},
		async onInit(promise) {
			const { capabilities } = await promise;

			console.log(capabilities);

			const TORCH_IS_SUPPORTED = !!capabilities.torch;
			try {
				await promise;
			} catch (error) {
				if (error.name === 'NotAllowedError') {
					this.error = 'ERROR: 您需要授予相机访问权限';
				} else if (error.name === 'NotFoundError') {
					this.error = 'ERROR: 这个设备上没有摄像头';
				} else if (error.name === 'NotSupportedError') {
					this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
				} else if (error.name === 'NotReadableError') {
					this.error = 'ERROR: 相机被占用';
				} else if (error.name === 'OverconstrainedError') {
					this.error = 'ERROR: 安装摄像头不合适';
				} else if (error.name === 'StreamApiNotSupportedError') {
					this.error = 'ERROR: 此浏览器不支持流API';
				}
			}
		}
	}
};
</script>

<style scoped>
.error {
	font-weight: bold;
	color: red;
}

.cameraMessage {
	width: 100%;
	height: 60px;
}

.qr-scanner {
	background-size: 3rem 3rem;
	background-position: -1rem -1rem;
	width: 100%;
	height: 100vh;
	/* position: relative; */
}

.qr-scanner .box {
	width: 213px;
	height: 213px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	border: 0.1rem solid #714329;
}

.qr-scanner .txt {
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	text-align: center;
	font-size: 18px;
	color: #714329;
	margin: 0 auto;
	position: absolute;
	buttom: 0;
	left: 0;
}

.qr-scanner .myQrcode {
	text-align: center;
	font-size: 18px;
	color: #714329;
}

.qr-scanner .line {
	height: calc(100% - 2px);
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #714329 211%);
	border-bottom: 3px solid white;
	transform: translateY(-100%);
	animation: radar-beam 2s infinite alternate;
	animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
	animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
	content: '';
	display: block;
	position: absolute;
	width: 3vw;
	height: 3vw;

	border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
	top: 0;
	border-top-color: white;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
	bottom: 0;
	border-bottom-color: white;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
	left: 0;
	border-left-color: white;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
	right: 0;
	border-right-color: white;
}

@keyframes radar-beam {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}
</style>
